<template>
  <div>
    <el-table
        height="500"
        :data="props.tableData"
        :loading="props.loading"
        @selection-change="handlesomeclick"
    >
      <el-table-column v-if="props.deletSome" type="selection" width="55" align="center"/>
      <el-table-column
          v-for="(col, index) in props.columns"
          :key="index"
          :prop="col.prop"
          :label="col.label"
          align="center"
      >
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column fixed="right" label="操作" min-width="120" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button link type="primary" size="small" @click="handleDelete(scope.row)">
            删除
          </el-button>
       </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {defineProps, defineEmits, onMounted,watch} from 'vue';
const props = defineProps({
  columns: {
    type: Array,
    required: true,
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  deletSome:{
    type: Boolean,
    default: true,
  }
});


const emits = defineEmits(['delete']);

// 处理编辑
const handleEdit = (row) => {
  console.log('Edit row:', row);
  emits('editRow', row);
  // 这里可以实现编辑逻辑
};
function handlesomeclick(row) {
  emits('somedelete', row);
}
// // watch(props.tableData, (newVal) => {
//   console.log("父组件 tableData 变化:", newVal);
// }, { deep: true });
// 处理删除
const handleDelete = (row) => {
  emits('delete', row);
};
onMounted(()=>{
  console.log(props.tableData,"子组件的值",props.columns)
})
</script>

<style scoped>
.text-danger {
  color: #f56c6c;
}
</style>
